<template>
    <view class="blood-input-container">
        <!-- 标题栏 -->
        <view class="header">
            <view class="back-button" @click="goBack">
                <u-icon name="arrow-left" color="#333" size="20"></u-icon>
                <text>返回</text>
            </view>
            <text class="page-title">血糖血脂血压记录</text>
            <view class="placeholder"></view>
        </view>

        <!-- 表单内容 -->
        <view class="form-container">
            <!-- 血糖输入 -->
            <view class="input-group">
                <text class="input-label">血糖 (mmol/L)</text>
                <u-input v-model="bloodData.glucose" type="number" placeholder="请输入血糖值" />
                <view class="input-tips">
                    <text>参考范围: 空腹3.9-6.1mmol/L</text>
                </view>
            </view>

            <!-- 血压输入 -->
            <view class="input-group">
                <text class="input-label">收缩压 (mmHg)</text>
                <u-input v-model="bloodData.systolicPressure" type="number" placeholder="请输入收缩压值" />
                <text class="input-label">舒张压 (mmHg)</text>
                <u-input v-model="bloodData.diastolicPressure" type="number" placeholder="请输入舒张压值" />
                <view class="input-tips">
                    <text>参考范围: 120/80 mmHg</text>
                </view>
            </view>

            <!-- 血脂输入 -->
            <view class="input-group">
                <text class="input-label">总胆固醇 (mmol/L)</text>
                <u-input v-model="bloodData.cholesterol" type="number" placeholder="请输入总胆固醇值" />
                <text class="input-label">甘油三酯 (mmol/L)</text>
                <u-input v-model="bloodData.triglycerides" type="number" placeholder="请输入甘油三酯值" />
                <view class="input-tips">
                    <text>参考范围: 总胆固醇&lt;5.2mmol/L，甘油三酯&lt;1.7mmol/L</text>
                </view>
            </view>

            <!-- 测量时间 -->
            <view class="input-group">
                <text class="input-label">测量时间</text>
                <u-datetime-picker v-model="bloodData.measureTime" mode="datetime"></u-datetime-picker>
            </view>

            <!-- 备注 -->
            <view class="input-group">
                <text class="input-label">备注</text>
                <u-textarea v-model="bloodData.notes" placeholder="填写其他相关情况" count maxlength="200"></u-textarea>
            </view>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-section">
            <u-button type="primary" text="保存记录" :customStyle="{ backgroundColor: '#58cc02' }"
                @click="saveRecord"></u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            bloodData: {
                glucose: '', // 血糖
                systolicPressure: '', // 收缩压
                diastolicPressure: '', // 舒张压
                cholesterol: '', // 总胆固醇
                triglycerides: '', // 甘油三酯
                measureTime: Date.now(), // 默认为当前时间
                notes: '' // 备注
            }
        }
    },
    methods: {
        // 返回上一页
        goBack() {
            uni.navigateBack()
        },
        // 保存记录
        saveRecord() {
            // 验证表单
            if (!this.bloodData.glucose && !this.bloodData.systolicPressure) {
                uni.showToast({
                    title: '请至少填写一项数据',
                    icon: 'none'
                })
                return
            }

            // 处理数据保存
            console.log('保存血糖血脂血压数据:', this.bloodData)

            // TODO: 调用API保存数据

            // 显示成功提示
            uni.showToast({
                title: '记录保存成功',
                icon: 'success',
                success: () => {
                    // 延迟返回
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                }
            })
        }
    }
}
</script>

<style lang="scss">
$duolingo-green: #58cc02;
$duolingo-blue: #1cb0f6;
$duolingo-red: #ff4b4b;

.blood-input-container {
    min-height: 100vh;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
}

.header {
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-button {
    display: flex;
    align-items: center;
    font-size: 28rpx;

    text {
        margin-left: 6rpx;
    }
}

.page-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.placeholder {
    width: 80rpx;
}

.form-container {
    flex: 1;
    padding: 30rpx;
}

.input-group {
    margin-bottom: 40rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.input-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    display: block;
}

.input-tips {
    margin-top: 10rpx;

    text {
        font-size: 24rpx;
        color: #999;
    }
}

.submit-section {
    padding: 30rpx;
    margin-bottom: 30rpx;
}
</style>